<template>
  <div class="notice-container">
    <el-card shadow="never">
      <!-- 搜索栏 -->
      <div class="filter-header">
        <span class="filter-label">工号：</span>
        <el-input
          v-model="filter.workId"
          placeholder=""
          style="width: 100px"
          class="filter-item"
          clearable
        />
        <span class="filter-label" style="margin-left: 15px">作者：</span>
        <el-input
          v-model="filter.author"
          placeholder=""
          style="width: 100px; margin-left: 10px"
          class="filter-item"
          clearable
        />
        <span class="filter-label" style="margin-left: 15px">主题：</span>
        <el-input
          v-model="filter.title"
          placeholder=""
          style="width: 120px; margin-left: 10px"
          class="filter-item"
          clearable
        />
        <el-button type="primary" style="margin-left: 15px" @click="handleSearch">搜索</el-button>
        <el-button style="margin-left: 10px" @click="resetSearch">重置</el-button>
      </div>

      <!-- 数据表格 -->
      <el-table
        :data="filteredData"
        style="width: 100%"
        header-row-class-name="table-header"
      >
        <el-table-column prop="id" label="编号" width="80" align="center"/>
        <el-table-column prop="title" label="主题" width="150"/>
        <el-table-column prop="workId" label="工号" width="80" align="center"/>
        <el-table-column prop="author" label="作者" width="120"/>
        <el-table-column prop="date" label="发布时间" width="120"/>
        <el-table-column label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-link 
              type="primary" 
              :underline="false"
              style="margin-left: 10px"
              @click="handleEdit(scope.row)"
            >
              编辑
            </el-link>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页信息 -->
      <div class="pagination-info">
        第 1 到 {{ filteredData.length }} 条，共 {{ filteredData.length }} 条记录。
      </div>
    </el-card>

    <!-- 详情对话框 -->
    <el-dialog
      title="通知详情"
      :visible.sync="detailDialogVisible"
      width="50%"
    >
      <el-descriptions :column="1" border>
        <el-descriptions-item label="编号">{{ currentNotice.id }}</el-descriptions-item>
        <el-descriptions-item label="主题">{{ currentNotice.title }}</el-descriptions-item>
        <el-descriptions-item label="工号">{{ currentNotice.workId }}</el-descriptions-item>
        <el-descriptions-item label="作者">{{ currentNotice.author }}</el-descriptions-item>
        <el-descriptions-item label="发布时间">{{ currentNotice.date }}</el-descriptions-item>
        <el-descriptions-item label="通知内容">
          <div style="white-space: pre-line;">{{ currentNotice.content || '无具体内容' }}</div>
        </el-descriptions-item>
      </el-descriptions>
      <span slot="footer" class="dialog-footer">
        <el-button @click="detailDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>

    <!-- 编辑对话框 -->
    <el-dialog
      :title="isEdit ? '编辑通知' : '新增通知'"
      :visible.sync="editDialogVisible"
      width="50%"
      @closed="handleDialogClosed"
    >
      <el-form 
        :model="form" 
        :rules="rules" 
        ref="form" 
        label-width="80px"
      >
        <el-form-item label="主题" prop="title">
          <el-input v-model="form.title" placeholder="请输入通知主题"></el-input>
        </el-form-item>
        <el-form-item label="工号" prop="workId">
          <el-input v-model="form.workId" placeholder="请输入工号"></el-input>
        </el-form-item>
        <el-form-item label="作者" prop="author">
          <el-input v-model="form.author" placeholder="请输入作者"></el-input>
        </el-form-item>
        <el-form-item label="发布时间" prop="date">
          <el-date-picker
            v-model="form.date"
            type="datetime"
            placeholder="选择发布时间"
            value-format="yyyy-MM-dd"
            style="width: 100%"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="通知内容" prop="content">
          <el-input
            type="textarea"
            :rows="4"
            v-model="form.content"
            placeholder="请输入通知内容"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filter: {
        workId: '',
        author: '',
        title: ''
      },
      tableData: [
        {
          id: 7,
          title: '系统升级通知',
          workId: '1001',
          author: '管理员',
          date: '2023-05-10',
          content: '系统将于本周六凌晨2:00-4:00进行升级维护，届时系统将无法访问，请提前做好工作安排。'
        },
        {
          id: 8,
          title: '紧急会议通知',
          workId: '1002',
          author: '人事部',
          date: '2023-05-15',
          content: '今天下午3点在会议室A召开紧急会议，请各部门负责人准时参加。'
        },
        {
          id: 9,
          title: '节假日安排',
          workId: '1003',
          author: '行政部',
          date: '2023-04-28',
          content: '五一劳动节放假安排：4月29日至5月3日放假调休，共5天。'
        },
        {
          id: 10,
          title: '考勤制度更新',
          workId: '1001',
          author: '管理员',
          date: '2023-03-01',
          content: '即日起执行新的考勤制度，请全体员工认真阅读并遵守相关规定。'
        }
      ],
      detailDialogVisible: false,
      editDialogVisible: false,
      isEdit: false,
      currentNotice: {},
      form: {
        id: '',
        title: '',
        workId: '',
        author: '',
        date: '',
        content: ''
      },
      rules: {
        title: [
          { required: true, message: '请输入通知主题', trigger: 'blur' },
          { min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' }
        ],
        workId: [
          { required: true, message: '请输入工号', trigger: 'blur' }
        ],
        author: [
          { required: true, message: '请输入作者', trigger: 'blur' }
        ],
        date: [
          { required: true, message: '请选择发布时间', trigger: 'change' }
        ]
      }
    }
  },
  computed: {
    // 过滤后的数据
    filteredData() {
      return this.tableData.filter(item => {
        return (
          (this.filter.workId === '' || item.workId.includes(this.filter.workId)) &&
          (this.filter.author === '' || item.author.includes(this.filter.author)) &&
          (this.filter.title === '' || item.title.includes(this.filter.title))
        )
      })
    }
  },
  methods: {
    // 搜索
    handleSearch() {
      // 计算属性 filteredData 会自动更新
      this.$message.success('搜索完成')
    },
    
    // 重置搜索
    resetSearch() {
      this.filter = {
        workId: '',
        author: '',
        title: ''
      }
    },
    
    // 显示详情
    showDetail(row) {
      this.currentNotice = { ...row }
      this.detailDialogVisible = true
    },
    
    // 编辑通知
    handleEdit(row) {
      this.isEdit = true
      this.form = JSON.parse(JSON.stringify(row))
      this.editDialogVisible = true
    },
    
    // 新增通知
    handleAdd() {
      this.isEdit = false
      this.editDialogVisible = true
    },
    
    // 对话框关闭
    handleDialogClosed() {
      this.$refs.form.resetFields()
      this.form = {
        id: '',
        title: '',
        workId: '',
        author: '',
        date: '',
        content: ''
      }
    },
    
    // 提交表单
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          if (this.isEdit) {
            // 编辑模式 - 更新数据
            const index = this.tableData.findIndex(item => item.id === this.form.id)
            if (index !== -1) {
              this.tableData.splice(index, 1, { ...this.form })
              this.$message.success('修改成功')
            }
          } else {
            // 新增模式 - 添加数据
            const newId = this.tableData.length > 0 
              ? Math.max(...this.tableData.map(item => item.id)) + 1 
              : 1
            this.tableData.unshift({
              ...this.form,
              id: newId
            })
            this.$message.success('新增成功')
          }
          this.editDialogVisible = false
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
.notice-container {
  padding: 20px;
}

.filter-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.filter-label {
  color: #606266;
  font-size: 14px;
}

.filter-item {
  margin-left: 5px;
}

.table-header th {
  background-color: #f5f7fa !important;
  font-weight: 600;
}

.pagination-info {
  margin-top: 15px;
  color: #909399;
  font-size: 13px;
  text-align: center;
}

.el-link {
  font-size: 13px;
  padding: 0 5px;
  cursor: pointer;
}

/* 对话框样式调整 */
.el-dialog__body {
  padding: 20px;
}

.el-descriptions {
  margin-top: -20px;
}

.el-descriptions-item__label {
  width: 100px;
}
</style>